<template>
  <div class="common-layout" v-for="(item,index) in allProjects" :key="index">
    <router-link :to="{ path: '/projectDetail', query: { id: item.pid }}">
      <el-container>
        <el-container>
          <el-container>
            <!-- 这里是项目发布人 -->
            <el-aside width="5vmax"><el-avatar :size="60" :src='item.avatar' /></el-aside>
            <el-aside>{{ item.username }}</el-aside>
          </el-container>
          <!-- 这里是项目插图 -->
          <el-footer height="30vmin">
            <el-image style="width: 100%; height: 100%" :src="item.photo" fit="cover" />
          </el-footer>
        </el-container>
        <el-aside width="18vmax">
          <!-- 这里是项目介绍 -->
          <show-projects-detail :project="item" />
        </el-aside>
      </el-container>
    </router-link>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import ShowProjectsDetail from './ShowProjectsDetail.vue';
export default {
  components: { ShowProjectsDetail },
  name: 'ShowProject',
  computed: {
    ...mapState('AllProject',['allProjects']),
  },
  methods: {
    ...mapActions('AllProject', ['searchAllProjects']),
    ...mapActions('User', ['getUserByUid']),
    // 获取项目数据和项目相应的添加人员的数据，不能删除
    async fetchProjectData(){
      try{
        await this.searchAllProjects();
        // 为每一个项目添加发布人信息
        for(let i=0;i<this.allProjects.length;i++){
          let otheruser = await this.getUserByUid(this.allProjects[i].create);
          this.allProjects[i].avatar = otheruser.avatar;
          this.allProjects[i].username = otheruser.username;
          // console.log("展示项目发起人头像",this.allProjects[i].avatar);
        }
      }catch(err){
        console.log(err);
      }
    }
  },
  created() {
    this.fetchProjectData();
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}
.el-header{
  width:80%;
}
.el-container {
  margin-bottom: 1vmin;
  padding:1vmin;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
}
.el-footer .el-image{
  border-radius: 20px;
}
</style>